<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title>直播列表</title>
    <div data-th-replace="layout/head"></div>
</head>
<body>
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left back liveBack" th:href="@{/mobile/course/recommend/index}">
            <span class="icon iconfont icon-fanhui"></span>
        </a>
        <h1 class='title c-fff'>直播列表</h1>
        <form id="search-course-form">
            <input type="hidden" id="subjectIds" name="subjectIds"/>
            <input type="hidden" id="orderType" name="orderType" value="0">
        </form>
    </header>
    <!-- top bar end-->
    <!--主体区域 开始-->
    <div class="content wm-content ovf">
        <article>
            <div class="wm-buttons-tab__wrap wm-buttons-select-tab__wrap">
                <div class="buttons-tab wm-buttons-tab">
                    <a href="#tab1" class="tab-link button">分类<em class="icon icon-down ml5"></em></a>
                    <a href="#tab2" class="tab-link button">排序<em class="icon icon-down ml5"></em></a>
                </div>
            </div>
            <div class="wm-cl__wrap">
                <div class="wm-cl-search__wrap wm-page-course">
                    <section class="tabs">
                        <section class="tab wm-nav-tab" id="tab1">
                            <section class="tab-nav">
                                <ul id="filter-subject-parent"></ul>
                            </section>

                            <section class="tab-menu">
                                <div class="pt5 ml5 mr5 pr5 pb5 pl5">
                                    <section class="no-data__wrap hide" id="no-data-tips">
                                        <em>&nbsp;</em>
                                        <p>此专业下科目正在整理中</p>
                                    </section>
                                    <ul class="row sort-subject-ul" id="filter-subject-son">
                                        <li class="col-auto active" data-subject="">
                                            <a href="javascript:void(0)" class="button button-round">全部</a>
                                        </li>
                                    </ul>
                                </div>
                            </section>
                            <!--科目 结束-->
                        </section>
                        <!--分类 结束-->
                        <section class="tab" id="tab2">
                            <div class="pl5 pr5 wm-sort-tj">
                                <div class="list-block no-mt">
                                    <ul id="filter-order">
                                        <li class="item-content item-link active" data-order="0">
                                            <div class="item-inner">
                                                <div class="item-title">按默认排序</div>
                                                <div class="item-after"><em class="iconfont icon-duihao"></em></div>
                                            </div>
                                        </li>
                                        <li class="item-content item-link" data-order="1">
                                            <div class="item-inner">
                                                <div class="item-title">按上架时间排序</div>
                                                <div class="item-after"><em class="iconfont icon-duihao"></em></div>
                                            </div>
                                        </li>
                                        <li class="item-content item-link" data-order="3">
                                            <div class="item-inner">
                                                <div class="item-title">按价格排序</div>
                                                <div class="item-after"><em class="iconfont icon-duihao"></em></div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </section>
                        <!--排序 结束-->
                    </section>
                </div>
                <div class="modal-overlay"></div>
            </div>

            <!--直播 开始-->
            <div class="page-infinite__wrap courses-list-page__wrap wm-page-course">
                <div class="page-group">
                    <div id="page-infinite-scroll-bottom" class="page page-current">
                        <div class="content infinite-scroll native-scroll" data-type='native' data-distance="100" style="background-color: #F4F7F9">
                            <div class="pl75 pr75">
                                <div class="list-block media-list wm-course-list__wrap no-mt">
                                    <ul class="list-container wm-course-list" id="live-course-list-box">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--直播 结束-->
        </article>
    </div>
    <div data-th-replace="layout/footer"></div>
    <script type="text/javascript" th:src="@{{path}/front/mobile/business/course/live/live-index.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>